import 'package:flutter/material.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';
import 'package:shared_preferences/shared_preferences.dart'; // 导入 SharedPreferences
import 'dart:convert'; // 导入 json 编码解码
import '../Tools/ToolsLocalStorage.dart'; // 导入本地存储工具

class MsgTopMenuCustom extends StatefulWidget {
  const MsgTopMenuCustom({super.key});

  @override
  State<MsgTopMenuCustom> createState() => _MsgTopMenuCustomState();
}

class _MsgTopMenuCustomState extends State<MsgTopMenuCustom>
    with SingleTickerProviderStateMixin {
  @override
  void initState() {
    super.initState();
    _loadNewsTypes(); // 初始化时加载资讯分类
  }

  List<Map<String, dynamic>> newsTypes = [];

  // 加载资讯分类列表
  Future<void> _loadNewsTypes() async {
    newsTypes = await LocalStorage.getNewsTypes();
    if (newsTypes.isEmpty) {
      newsTypes = await _insertNewsType();
    }
    setState(() {});
  }

  // 插入新的资讯分类
  Future<List<Map<String, String>>> _insertNewsType() async {
    List<Map<String, String>> newItems = [
      {
        'name': '分类1',
        'index': '0',
        'selected': 'false'
      },
      {
        'name': '分类2',
        'index': '1',
        'selected': 'false'
      },
      {
        'name': '分类3',
        'index': '2',
        'selected': 'false'
        },
      {
        'name': '分类4',
        'index': '3',
        'selected': 'false'
      },
      {
        'name': '分类5',
        'index': '4',
        'selected': 'false'
      },
      {
        'name': '分类6',
        'index': '5',
        'selected': 'false'
      },
    ];
    await LocalStorage.insertNewsType(newItems);
    return await LocalStorage.getNewsTypes();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: TDTheme.of(context).grayColor1, // 添加背景色
      body: Stack(children: [
        Positioned(
          top: 0,
          left: 0,
          right: 0,
          child: Image.asset(
            'assets/images/home/home_topbg.png',
            fit: BoxFit.cover,
            height: 200,
          ),
        ),
        ListView(
          padding: EdgeInsets.all(20),
          children: [
            Container(
              width: double.infinity,
              padding: EdgeInsets.only(top: 20, bottom: 20),
              child: Row(
                children: [
                  const Expanded(child: SizedBox()),
                  TDText('资讯',
                      textAlign: TextAlign.left,
                      font: TDTheme.of(context).fontTitleMedium),
                  const Expanded(child: SizedBox()),
                ],
              ),
            ),
            Row(
              children: [
                TDText('我的分类',
                    textAlign: TextAlign.left,
                    font: TDTheme.of(context).fontTitleSmall),
                SizedBox(width: 10),
                TDText(
                  '点击进入分类',
                  textColor: TDTheme.of(context).grayColor6,
                  textAlign: TextAlign.left,
                  font: TDTheme.of(context).fontBodySmall,
                ),
                const Expanded(child: SizedBox()),
                TDText(
                  '管理分类',
                  textAlign: TextAlign.right,
                  font: TDTheme.of(context).fontBodySmall,
                  textColor: TDTheme.of(context).brandColor5,
                ),
                SizedBox(width: 10),
                Icon(
                  TDIcons.chevron_up,
                  size: 24,
                  color: TDTheme.of(context).grayColor9,
                )
              ],
            ),
            SizedBox(height: 10),
            Container(
              // height: 100,
              child: Center(
                child: Wrap(
                  spacing: 20.0, // 标签之间的间距
                  runSpacing: 10, // 行之间的间距
                  children: newsTypes.map((newsType) {
                    return GestureDetector(
                      onTap: () {
                        Navigator.pop(context, newsType['index']);
                      },
                      child: TDTag(
                        newsType['name'],
                        padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                      ),
                    );
                  }).toList(),
                ),
              ),
            ),
            SizedBox(height: 10),
            Row(
              children: [
                TDText('添加分类',
                    textAlign: TextAlign.left,
                    font: TDTheme.of(context).fontTitleSmall),
                SizedBox(width: 10),
                TDText(
                  '点击添加分类',
                  textColor: TDTheme.of(context).grayColor6,
                  textAlign: TextAlign.left,
                  font: TDTheme.of(context).fontBodySmall,
                ),
                const Expanded(child: SizedBox()),
              ],
            ),
            SizedBox(height: 10),
            Container(
              // height: 100,
              child: Center(
                child: Wrap(
                  spacing: 20.0, // 标签之间的间距
                  runSpacing: 10, // 行之间的间距
                  children: [
                    const TDTag(
                      '标签文字',
                      padding:
                          EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                    ),
                    const TDTag(
                      '标签文字',
                      padding:
                          EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                    ),
                    const TDTag(
                      '标签文字',
                      padding:
                          EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                    ),
                    const TDTag(
                      '标签文字',
                      padding:
                          EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                    ),
                    const TDTag(
                      '标签文字',
                      padding:
                          EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                    ),
                    const TDTag(
                      '标签文字',
                      padding:
                          EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                    ),
                    const TDTag(
                      '标签文字',
                      padding:
                          EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                    ),
                    const TDTag(
                      '标签文字',
                      padding:
                          EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                    ),
                    const TDTag(
                      '标签文字',
                      padding:
                          EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                    ),
                  ],
                ),
              ),
            ),
          ],
        )
      ]),
    );
  }

  @override
  void dispose() {
    super.dispose();
  }
}
